import React, { useState, useEffect } from 'react';
import { Button, Drawer, DatePicker ,Space, Table, Tag } from 'antd';
import { useSelector, useDispatch } from "umi"
import type { ColumnsType } from 'antd/es/table';

const { RangePicker } = DatePicker;

type Props = {
    openRecord: boolean,
    recordClose(value: boolean): void
}

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '订单ID',
      dataIndex: 'order_id',
      key: 'order_id',
    },
    {
      title: '操作记录',
      dataIndex: 'message',
      key: 'message',
    },
    {
      title: '操作时间',
      dataIndex: 'time',
      key: 'time',
    },
  ];
  

const OrderRecord = (props: Props) => {
    const [infoAddress, setInfoAddress]: any = useState()
    const [info, setInfo]: any = useState()
    const orderState = useSelector((state: { order: any, updateOrder: any,history:any }) => {
        //state整个仓库i数据，product是仓库命名空间
        // console.log("cang",state.order.updateOrder);
        return state.order
    })

    useEffect(() => {
        if (orderState.updateOrder.length > 0) {
            console.log("orderState", orderState.updateOrder[0]);
            setInfoAddress(orderState.updateOrder[0].address)
            setInfo(orderState.updateOrder[0])
        }

    }, [orderState])

    const onClose = () => {
        props.recordClose(false)
    };


    return (
        <>

            <Drawer title="订单详情" size='large' placement="right" onClose={onClose} open={props.openRecord}>
            <Table columns={columns} dataSource={orderState.history} rowKey='_id'/>
            </Drawer>

        </>
    )
}

export default OrderRecord
